<template>
	<view class="content an-sign-data">
		<view class="an-top-bg">
			<h2 class="an-title">统计</h2>
			<view @click="toRefresh" class="an-ico" ><span class="iconfont icon-shuaxin1"></span></view>
		</view>
		<view class="an-quick">
			<view class="an-box">
				<text class="an-text-labe">文章数</text>
				<text class="an-text-val">{{statistics.article}}</text>
			</view>
			<view class="an-box" @click="toQuick(2)">
				<text class="an-text-labe">打卡用户</text>
				<text class="an-text-val">{{statistics.userSign}}</text>
			</view>
			<view class="an-box">
				<text class="an-text-labe">总打卡数</text>
				<text class="an-text-val">{{statistics.sign}}</text>
			</view>
			<view class="an-box">
				<text class="an-text-labe">留言数</text>
				<text class="an-text-val">{{statistics.msg}}</text>
			</view>
			<view class="an-box">
				<text class="an-text-labe">记录消息</text>
				<text class="an-text-val">{{statistics.msg}}</text>
			</view>
		</view>
		<view class="an-card">
			<view class="an-head">
				<text class="an-title">打卡统计</text>
				<view class="an-ico" @click="onSearch"><span class="iconfont icon-rili"></span></view>
			</view>
			<view class="qiun-charts">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=false @touchstart="touchLineA"></canvas>
			</view>
		</view>
		
		<!-- 选择器弹框组件 -->
		<mpvue-picker themeColor="#007AFF" ref="mpvuePicker" mode="selector" :deepLength="1" :pickerValueDefault="[0]"
		 @onConfirm="onConfirm" :pickerValueArray="pickerValueArray"></mpvue-picker>
		 
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	import {isEmpty} from '@/common/graceChecker.js'
	import {dataTimeFormat} from '@/common/util.js'
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue'
	import {mapState} from 'vuex'
	var _self;
	var canvaLineA=null;
	export default{
		components: {
			mpvuePicker,
		},
		data(){
			return{
				statistics:{
					article: '',	// 文章总数
					articleState: '',	// 已发布的文章总数
					msg: '',	// 留言总数
					sign: '',	// 打卡总数
					user: '',	// 用户数
					userSign: '',	// 打卡用户数
				},
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,	//设备像素比
				serverData: '',
				postData:{	// 请求参数
					startTime: '',
					endTime: ''
				},
				pickerValueArray:[{
					label: '最近一周',
					value: '0'
				},
				{
					label: '最近一个月',
					value: '1'
				}],
			}
		},
		computed: {
		    ...mapState(['userInfo'])
		},
		onLoad(){
			_self = this;
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
						_self.cWidth= uni.upx2px(res.windowWidth - 30)
						_self.cHeight = uni.upx2px(300)
					}
				}
			});
		},
		onReady() {
			this.getServerData();
			this.anLoad()
		},
		methods:{
			isEmpty,
			anLoad(){
				// this.$api.allStatistics().then(res=>{
				// 	this.statistics = res
				// }).catch(err=>{
				// 	console.log('接口请求抓取失败'+err)
				// })
			},
			toQuick(n){	// 快速导航
				let url = ''
				if(n===2){	// 用户地图
					url = '../sign/signMap'
				}
				uni.navigateTo({
				    url: url
				});
			},
			onSearch(){	// 打卡统计 时间筛选
				this.$refs.mpvuePicker.show()
			},
			onConfirm(e) {	// 级联选择器 确定
				let nd = {	
					startTime: '',
					endTime: ''
				}
				if(e.value[0] == 1){	// 最近一个月
					const nst = new Date()
					const star = new Date(nst.setMonth(nst.getMonth() - 1))
					nd.startTime = dataTimeFormat('yyyy-MM-dd', star)
					nd.endTime = dataTimeFormat('yyyy-MM-dd', new Date())	// 当前时间
				}
				this.postData = nd
				this.getServerData()
			},
			getServerData(){	// 获取打卡数据
				uni.showLoading({
				    title: '加载中'
				})
				let nd = {
					startTime: this.postData.startTime,
					endTime: this.postData.endTime
				  }
				  if (isEmpty(nd.startTime) || isEmpty(nd.endTime)) { // 筛选时间为空  默认设为最近7天数据
					const nst = new Date()
					const star = new Date(nst.setDate(nst.getDate() - 6))
					const end = new Date(new Date().setDate(new Date().getDate() + 1))
					nd.startTime = dataTimeFormat('yyyy-MM-dd', star)
					nd.endTime = dataTimeFormat('yyyy-MM-dd', end)
				  }
				  const arry = [] // 日期数组
				  const dataVal = [] // 数据  数组
				  let st = new Date(nd.startTime)
				  const en = new Date(nd.endTime)
				  while (st.getTime() < en.getTime()) {
					arry.push(dataTimeFormat('MM-dd', st))
					st = new Date(st.setDate(st.getDate() + 1))
				  }
				
				let Column= {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: '打卡数',
						data: [70, 40, 65, 100, 44, 68],
						color: '#bb51fb',
					}]
				}
				this.$api.statisticsSign(nd).then(res=>{
					uni.hideLoading()
					if(!isEmpty(res)){
						arry.forEach((time, index) => {
						  dataVal[index] = 0
						  for (let i = 0; i < res.length; i++) {
							if (time === dataTimeFormat('MM-dd', res[i].time)) {
							  dataVal[index]++
							}
						  }
						})
						let newArry = [...arry].map(item=>{	 // 时间数据调整  只保留天
							return dataTimeFormat('dd', item)
						})
						Column.categories = newArry
						Column.series[0].data = dataVal
					}
					_self.showLineA("canvasLineA",Column)
				})
			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:7,
					legend:{show:true},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
						labelCount: 7,	// 显示的标签数量
						disableGrid: true,	//不绘制X轴网格
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:2,	//Y轴线数量
						format:(val)=>{return val}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			toRefresh(){	// 刷新数据
				this.getServerData();
				this.anLoad()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.an-sign-data{
		position: relative;
		.an-top-bg{
			height: 100upx;
			padding-top: 80upx;
			position: initial;
			display: flex;
			justify-content: space-between;
			.an-ico{
				.iconfont{
					font-size: 20px;
				}
			}
		}
		.an-quick{
			margin: -80rpx 30rpx 30rpx 30rpx;
			z-index: 2;
			width: auto;
			padding: 0;
			background-color: #FFFFFF;
			border-radius: 30upx;
			overflow: hidden;
			display: flex;
			justify-content: space-around;
			.an-box{
				text-align: center;
				padding: 30upx 0;
				.an-text-labe{
					color: #b9b9b9;
					display: block;
					font-size: 24upx;
				}
				.an-text-val{
					display: block;
					color: #000000;
					font-size: 40upx;
				}
			}
			
		}
		.an-card{
			margin: 0 30rpx;
			padding: 0;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			width: calc( 100% - 60rpx );
			overflow: hidden;
			.an-head{
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				.an-title{
					display: block;
					font-weight: bold;
				}
			}
			
		}
	}
</style>
